<template>
  <div class="card">
    <el-card
      class="cardItem"
      shadow="hover"
      v-for="(item, index) in sliceList()"
      :key="index"
    >
      <div class="cardBody">
        <div class="cardImg">
          <img :src="item.homeImg" />
        </div>
        <div class="cardInfo">
          <h2>{{item.homeTitle}}</h2>
          <p>{{item.homeText}}</p>
          <UserInfo :userInfo="item.userInfo"></UserInfo>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import UserInfo from "@/components/UserInfo.vue";
export default {
  data() {
    return {};
  },
  props: {
    homeList: Array,
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
    sliceList: function(){
      return this.homeList.slice((this.$store.state.page-1)*4,this.$store.state.page*4);
    }
  },

  //组件
  components: {
    UserInfo,
  },

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
};
</script>

<style lang='scss' scoped>
.card {
  height: 840px;
  overflow: hidden;
  .cardItem {
    margin-bottom: 10px;
    .cardBody {
      display: flex;
      .cardImg {
        width: 210px;
        height: 160px;
        margin-right: 30px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .cardInfo {
        flex: 1;
        position: relative;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
